<template>
	<view class="view-content-comment" v-if="commentList.length > 0">
		<text class="title">{{ title }}</text>
		<view class="view-pro-comment-list" v-for="(item, index) in commentList" :key="index">
			<view class="border-line" v-if="index > 0"></view>
			<view class="view-pro-comment-list-item">
				<image :src="item.HEADIMGURL" class="view-comment-list-item-photo" mode="aspectFill"></image>
				<view class="comment-pro-title" style="flex: 1;">
					<text class="comment-name">{{ item.FIRSTNICKNAME }}</text>
					<view class="tag-view" style="display: flex; "><uni-tag :inverted="true" :text="item.TAG" type="success" size="small" /></view>
				</view>
				<view  class="comment-pro-title" style="align-items: center;">
				
				</view>	
			</view>
			<text class="pro-comment-content">{{ item.COMMENT }}</text>
			<view class="pro-comment-sub">
				<text class="pro-comment-sub-time">{{ item.COMMENT_TIME }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CommentList',
	//属性
	props: {
		commentList: {
			type: Array,
			default: []
		},
		title: {
			type: String,
			default: '漫友评论'
		}
	},
	data() {
		return {
			
		};
	},
	methods: {
		
		
	}
};
</script>
<style lang="less">


.view-content-comment {
	background-color: white;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx;
	.title {
		width: 100%;
		color: #333;
		font-weight: bold;
		font-size: 34rpx;
	}
}

.border-line {
	border-bottom: 1px solid #f6f6f6;
}
.view-pro-comment-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: white;
	padding-bottom: 20rpx;
}
.view-pro-comment-list-item {
	display: flex;
	margin-top: 20rpx;
	flex: 1;
	flex-direction: row;
}
.comment-pro-title {
	justify-content: center;
	height: 90rpx;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
}
.pro-comment-content {
	color: #000;
	font-size: 32rpx;
	font-weight: 500;
	margin-top: 20rpx;
}
.praise-icon {
	height: 46rpx;
	width: 46rpx;
	line-height: 1;
	font-size: 46rpx;
	color: #999;
}
.praise-num {
	font-size: 26rpx;
	color: #999;
}
.pro-comment-sub {
	display: flex;
	align-items: center;
	flex-direction: row;
	.pro-comment-sub-time {
		color: #999;
		font-size: 26rpx;
	}
}
.comment-name {
	color: #48648b;
	font-size: 32rpx;
	display: flex;
	align-items: center;
}

.view-comment-list-item-photo {
	height: 85rpx;
	width: 85rpx;
	border-radius: 5rpx;
	border: 1px solid #f6f6f6;
}
</style>
